<!--
 * @description 专项答题列表组件
 * @date 2022/11/12
 -->
<template>
  <div class="special-list-fixed-num-comp" :style="{marginTop:top,'padding-left': spacing, 'padding-right': spacing}">
    <cell-title
      v-if="(isShowModuleName || option.isMore === '1')"
      :title="moduleName"
      :option="option"
      :hide-desc="option.isMore === '2'"
      :style="{
        'background-color': backgroundColor,
        'border-radius':
          radiusSize+ ' ' + radiusSize + ' 0 0'
      }"
    />
    <ul>
      <li v-for="(item, index) in dataList" :key="index">
        <div class="title">{{ item.name }}</div>
        <div v-if="item.crtTime" class="time">{{ spliceTime(item.crtTime) }}</div>
        <div class="func">
          <div class="func_left">
            <span v-if="item.integralNum > 0" class="jf">积分</span><span v-if="item.integralNum > 0" class="jfs">+{{
              item.integralNum
            }}</span>
          </div>
          <div class="func_right">开始答题</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import mixins from './../mixins'
import CellTitle from '@/components/CustomPage/apps/widget/characters/cellTitle'

export default {
  name: 'SpecialListFixedNumberComp',
  components: {
    CellTitle
  },
  mixins: [mixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataList: [
        {
          id: 0,
          name: 'XXXXXXXXXXXXXX专项答题',
          crtTime: '2022-12-27',
          isJF: true,
          jf: 2
        }
      ],
      page: 1,
      pageSize: 10,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      isLoadError: false,
      isNoData: false
    }
  },
  created() {
    if (this.isInitData) {
      this.dataList = []
      this.pageSize = this.option.pageSize
      this.initData()
    }
  },
  methods: {
    spliceTime(str) {
      if (!str) {
        return ''
      }
      const newstr = str.split(' ')
      const str1 = newstr[0].split('-')
      return str1[0] + '年' + str1[1] + '月' + str1[2] + '日'
    },
    setData(result) {
      // console.log(result, 'result')
      if (result !== 'error') {
        this.dataList = result.dataList?.data?.rows || []
      }
    }
  }
}
</script>

<style scoped lang="scss">
@import '@/styles/var.scss';
@import '@/styles/utility/rem.scss';

.special-list-fixed-num-comp {
  > ul {
    > li {
      background: #ffffff;
      border-radius: rem(16);
      position: relative;
      margin-bottom: rem(20);
      padding: rem(28) rem(25);

      .title {
        font-size: rem(30);
        font-weight: bold;
        text-align: left;
        color: #333333;
        line-height: 1.5;
        margin-bottom: rem(20);
      }

      .time {
        /* height: 25px; */
        font-size: rem(26);
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #999999;
      }

      .func {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: rem(15);
        border-top: solid 1px #e5e5e5;
        padding-top: rem(20);

        .func_left {
          .jf {
            font-size: rem(24);
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: center;
            color: #999999;
          }

          .jfs {
            font-size: rem(30);
            font-family: DIN, DIN-Medium;
            font-weight: bold;
            text-align: center;
            color: #ec4736;
          }
        }

        .func_right {
          width: rem(140);
          height: rem(56);
          line-height: rem(56);
          text-align: center;
          @include bg-color($mainColor);
          border-radius: rem(30);
          color: #fff;
        }
      }
    }
  }
}
</style>
